<template>
    <div class="person">
        <h2>一辆{{ car.brand }}车,价值{{ car.price }}万</h2>
        <button @click="changePrice">修改汽车的价格</button>
        <br>
        <h2>游戏列表</h2>
        <ul>
            <li v-for="g in games" v-bind:key="g.id">
                {{ g.name }}
            </li>
        </ul>
        <button @click="changeFirstGame">修改第一个游戏的名字</button>
        <br>
        <h2>测试: {{ obj.a.b.c }}</h2>
        <button @click="changeC">修改a.b.c的值</button>
    </div>
</template>

<script lang="ts">
export default {
    name: 'Person',
}
</script>

<script setup lang="ts">
import { reactive } from 'vue'

let car = reactive({ brand: "BYD", price: 10000 })
let games = reactive([
    { id: 1, name: '王者荣耀' },
    { id: 2, name: '原神' },
    { id: 3, name: '三国志' },
]);
// reactive支持对深层次的数据进行响应式的处理
// reactive包裹后生成的对象即为响应式对象,被包裹的对象为原对象
let obj = reactive({
    a: {
        b: {
            c: 666
        }
    }
})

const changePrice = () => {
    car.price += 10
    console.log(car.price);  // 执行到这一步,car.price做了修改,但如果car不是响应式的,修改就不会反应到页面上
}
const changeFirstGame = () => {
    games[0].name = '王者荣耀2'
    console.log(games[0].name);
}
function changeC() {
    obj.a.b.c = 999
}
</script>

<style scoped>
.person {
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
}

button {
    margin: 0 2px;
}

li {
    font-size: 15px;
}
</style>